<template>
  <div class="Newbankcard">
    <div class="header">
      <div class="hackhome"></div>
      <!-- 银行卡账号 -->
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>银行卡账号</span>
          </div>
          <div>
            <el-button @click="Bankcardaslist" size="mini" style="
                width: 64px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              ">新增</el-button>
          </div>
        </div>
        <!-- 银行卡列表 -->
        <el-table border :data="MembershipInformationData.bankCard" size="mini" :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }" style="width: 100%">
          <el-table-column prop="cardNumber" label="卡号"> </el-table-column>
          <el-table-column prop="cardType" label="卡类型" width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.cardType == 'debitcard'">借记卡</span>
              <span v-if="scope.row.cardType == 'creditcard'">信用卡</span>
            </template>
          </el-table-column>
          <el-table-column prop="creditCardTime" v-if="way.cardType == '信用卡'" label="卡有效期" width="140">
            <template slot-scope="scope">
              {{ show(scope.row.creditCardTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="commonCard" label="常用卡" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.commonCard == 'true'">是</template>
              <template v-if="scope.row.commonCard == 'false'">否</template>
            </template>
          </el-table-column>
          <el-table-column prop="cardholder" label="持卡人" width="100">
          </el-table-column>
          <el-table-column prop="documentsType" label="证件类型" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.idType == 'ID_CARD'">身份证</span>
              <span v-if="scope.row.idType == 'PASSPORT'">护照</span>
              <span v-if="scope.row.idType == 'MILITARY_ID'">军人证</span>
              <span v-if="scope.row.idType == 'MTPFHKAMR'">港澳居民来往内地通行证</span>
              <span v-if="scope.row.idType == 'MTPFTR'">台湾居民来往大陆通行证</span>
              <span v-if="scope.row.idType == 'PRICFF'">外国人永久居留身份证</span>
              <span v-if="scope.row.idType == 'HKAMP'">港澳通行证</span>
              <span v-if="scope.row.idType == 'ACCOUNT_BOOK'">户口本</span>
              <span v-if="scope.row.idType == 'BIRTH_CERTIFICATE'">出生证明</span>
              <span v-if="scope.row.idType == 'TAIWAN_PASS'">台湾通行证</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCdid" label="证件号" width="160">
            <template
              slot-scope="scope">{{scope.row.ownerCdid? scope.row.ownerCdid.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}</template>
          </el-table-column>
          <el-table-column prop="obligatePhone" label="预留手机号" width="120">
          </el-table-column>
          <el-table-column prop="name" label="操作" width="200">
            <template slot-scope="scope">
              <el-button style="background-color: #6090ec; color: #fff" size="mini"
                @click="getbackBankCardById(scope.row)">修改</el-button>

              <el-button @click="Deletephone(scope.row)" style="background-color: #ff0000; color: #fff" size="mini">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增银行卡 -->
      <el-dialog title="会员信息查询-银行卡账户" :visible.sync="Bankcard" :close-on-click-modal="false" width="30%">
        <div class="too-1-1">
          <div class="too"></div>
          <span>新增银行卡账户</span>
        </div>
        <el-form size="mini" :inline="true" ref="way" :model="way" :rules="addrules" class="bandCard">
          <el-form-item label="请选择卡类型" prop="cardType">
            <el-select v-model="way.cardType" placeholder="请选择" clearable>
              <el-option v-for="item in leixing" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入卡号" prop="cardNumber">
            <el-input placeholder="请输入卡号" v-model.trim="way.cardNumber" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择有效期" v-if="way.cardType=='creditcard'" prop="creditCardTime">
            <!-- <el-date-picker size="mini" v-model="way.creditCardTime" type="date" placeholder="选择日期">
            </el-date-picker> -->
            <el-date-picker size="mini" v-model="way.creditCardTime" type="month" placeholder="选择月"> </el-date-picker>
          </el-form-item>
          <el-form-item label="请输入CVV2" prop="CVV2" v-if="way.cardType=='creditcard'">
            <el-input placeholder="请输入CVV2" v-model.trim="way.CVV2" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="obligatePhone">
            <el-input placeholder="请输入手机号" v-model.trim="way.obligatePhone" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名" prop="cardholder">
            <el-input placeholder="请输入持卡人姓名" v-model="way.cardholder" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择证件类型">
            <el-select v-model="way.documentsType" placeholder="请选择证件类型" size="mini" clearable>
              <el-option v-for="item in zhengjian" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入证件号">
            <el-input placeholder="请输入证件号" v-model="way.documentsPhone" size="mini"></el-input>
          </el-form-item><br />
          <el-form-item>
            <el-button @click="getbackInsertBankCard('way')" type="primary">确定</el-button>
            <el-button @click="Bankcard=false" type="primary">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 修改银行卡 -->
      <el-dialog title="会员信息查询-修改银行卡" :visible.sync="Modify" :close-on-click-modal="false" width="30%">
        <div class="too-1-1">
          <div class="too"></div>
          <span>修改银行卡账户</span>
        </div>

        <el-form size="mini" :inline="true" :model="way" ref="way" :rules="editrules" class="bandCard">
          <el-form-item label="请选择卡类型" prop="cardType">
            <el-select v-model="way.cardType" placeholder="请选择" size="mini" clearable>
              <el-option v-for="item in leixing" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入卡号" prop="documentsType">
            <el-input placeholder="请输入卡号" style="width: 220px" v-model="way.cardNumber" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择有效期" prop="documentsType" v-if="way.cardType=='creditcard'">
            <el-date-picker size="mini" v-model="way.creditCardTime" type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="请输入CVV2" prop="CVV2" v-if="way.cardType=='creditcard'">
            <el-input placeholder="请输入CVV2" v-model="way.CVV2" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="obligatePhone">
            <el-input placeholder="预留手机号" style="width: 220px" v-model="way.obligatePhone" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名" prop="cardholder">
            <el-input placeholder="请输入持卡人姓名" style="width: 220px" v-model="way.cardholder" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择证件类型">
            <el-select v-model="way.documentsType" placeholder="请选择" size="mini" clearable>
              <el-option v-for="item in zhengjian" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入证件号">
            <el-input placeholder="请输入卡号" style="width: 220px" v-model="way.documentsPhone" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getbackUpdateBankCard" size="mini" type="primary">确定</el-button>
            <el-button @click="Modify=false" type="primary">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="确认删除该银行卡吗" :visible.sync="Deletep" :close-on-click-modal="false" width="20%">
        <el-button @click="getbackDeleteBankCard" size="mini" style="
            color: #fff;
            background-color: #f6b23e;
          ">确定
        </el-button>
        <el-button @click="Deletep=false" size="mini" type="primary">取消
        </el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Newbankcard",
    // 父子传递参数
    props: ["MembershipInformationData"],
    data() {
      return {
        bankCardIdList: "",
        // 新增银行卡
        way: {
          cardNumber: "",
          creditCardTime: "",
          cardType: "",
          cardholder: "",
          obligatePhone: "",
          documentsType: "",
          documentsPhone: "",
          cardNumber: "",
          CVV2: null,
        },
        card: [],
        leixing: [{
            label: "信用卡",
            value: "creditcard",
          },
          {
            label: "借记卡",
            value: "debitcard",
          },
        ],
        zhengjian: [{
            value: "ID_CARD",
            label: "身份证",
          },
          {
            value: "MILITARY_ID",
            label: "军人证",
          },
          {
            value: "PASSPORT",
            label: "护照",
          },
          {
            value: "MTPFHKAMR",
            label: "港澳居民来往内地通行证",
          },
          {
            value: "MTPFTR",
            label: "台湾居民来往大陆通行证",
          },
          {
            value: "RPFHKMATR",
            label: "台湾居民来往大陆通行证",
          },
          {
            value: "PRICFF",
            label: "外国人永久居留身份证",
          },
          {
            value: "HKAMP",
            label: "港澳通行证",
          },
          {
            value: "ACCOUNT_BOOK",
            label: "户口本",
          },
          {
            value: "BIRTH_CERTIFICATE",
            label: "出生证明",
          },
          {
            value: "TAIWAN_PASS",
            label: "台湾通行证",
          },
        ],
        // 新增银行卡校验
        addrules: {
          cardNumber: [{
            required: true,
            message: "请输入卡号",
            trigger: "change"
          }, ],
          cardType: [{
            required: true,
            message: "请选择卡类型",
            trigger: "change"
          }, ],
          creditCardTime: [{
            required: true,
            message: "请选择有效期",
            trigger: "change"
          }, ],
          obligatePhone: [{
            required: true,
            message: "请输入手机号",
            trigger: "change"
          }, ],
          cardholder: [{
            required: true,
            message: "请输入持卡人姓名",
            trigger: "change"
          }, ],
          documentsType: [{
            required: true,
            message: "请选择证件类型",
            trigger: "change"
          }, ],
          documentsPhone: [{
            required: true,
            message: "请输入证件号",
            trigger: "change"
          }, ],
          CVV2: [{
            required: true,
            message: "请输入证件号",
            trigger: "change"
          }],
        },
        // 修改银行卡校验
        editrules: {
          cardNumber: [{
            required: true,
            message: "请输入卡号",
            trigger: "change"
          }, ],
          cardType: [{
            required: true,
            message: "请选择卡类型",
            trigger: "change"
          }, ],
          creditCardTime: [{
            required: true,
            message: "请选择有效期",
            trigger: "change"
          }, ],
          obligatePhone: [{
            required: true,
            message: "请输入手机号",
            trigger: "change"
          }, ],
          cardholder: [{
            required: true,
            message: "请输入持卡人姓名",
            trigger: "change"
          }, ],
          documentsType: [{
            required: true,
            message: "请选择证件类型",
            trigger: "change"
          }, ],
          documentsPhone: [{
            required: true,
            message: "请输入证件号",
            trigger: "change"
          }, ],
          CVV2: [{
            required: true,
            message: "请输入证件号",
            trigger: "change"
          }],
        },
        // 银行卡新增
        Bankcard: false,
        Deletep: false,
        labelPosition: "right",
        formLabelAlign: {
          name: "",
          checked: true,
        },
        radio: 3,
        value: "",
        Modify: false,
        checked: false,
        sizeForm: {
          name: "",
          region: "",
        },
      };
    },
    methods: {
      Bankcardaslist() {
        this.way = {}
        this.Bankcard = true
      },
      // 列表
      getbackSelectCard() {
        this.$axios.getbackSelectCard({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            this.card = res.data;
            console.log(this.card);
          }
        });
      },

      // 新增银行卡
      getbackInsertBankCard(formName) {
        console.log(this.way.cardType)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.way.cardType, this.way.documentsType, this.way.documentsPhone)
            if (this.way.documentsType != '' && this.way.documentsPhone != '') {
              // if(this.way.cardType!='debitcard' &&this.way.documentsType!='' &&this.way.documentsPhone!=''){
              this.dialogVisible = false;
              this.$axios
                .getbackInsertBankCard({
                  cardNumber: this.way.cardNumber,
                  creditCardTime: this.way.creditCardTime,
                  cardType: this.way.cardType,
                  cardholder: this.way.cardholder,
                  obligatePhone: this.way.obligatePhone,
                  documentsType: this.way.documentsType,
                  documentsPhone: this.way.documentsPhone,
                  customerId: this.MembershipInformationData.customerId,
                  CVV2: this.way.CVV2,
                })
                .then((res) => {
                  console.log(res);
                  if (res.code == "200") {
                    this.$message({
                      message: "新增成功",
                      type: "success",
                    });
                    this.Bankcard = false;
                    this.$refs[formName].resetFields();

                    this.$axios.getcustomerPhone({
                      id: this.MembershipInformationData.customerId
                    }).then((res) => {
                      console.log(res)
                      this.$axios.getqueryCustomera({
                        phone: res.data.customerPhone
                      }).then((res) => {
                        console.log(res)
                        this.MembershipInformationData.bankCard = res.data.bankCard
                      })
                    })

                  }
                });
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'warning'
              });
            }

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },

      // 查询待修改银行卡信息
      getbackBankCardById(row) {
        this.bankCardIdList = row.bankCardId
        this.way = {}
        this.Modify = true;
        this.$axios
          .getbackBankCardById({
            bankCardId: String(row.bankCardId),
            memberId: String(row.memberId),

          })
          .then((res) => {
            if (res.code == "200") {
              console.log(res);
              this.way = res.data;
              console.log(this.way);
            }
          });
      },
      //修改银行卡
      getbackUpdateBankCard() {
        if (this.way.documentsType != '' && this.way.documentsPhone != '') {
          this.Modify = false;
          this.$axios
            .getbackUpdateBankCard({
              bankCardId: this.bankCardIdList,
              cardNumber: this.way.cardNumber, //卡号
              cardType: this.way.cardType, //卡类型
              cardholder: this.way.cardholder, //持卡人姓名
              obligatePhone: this.way.obligatePhone, //预留售价号
              documentsType: this.way.documentsType, //证件类型
              documentsPhone: this.way.documentsPhone, //证件号
              creditCardTime: this.way.creditCardTime, //有效期
              CVV2: this.way.CVV2, //cvv2
            })
            .then((res) => {
              console.log(res);
              if (res.code == "200") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                // this.$refs[formName].resetFields();
                this.$axios.getcustomerPhone({
                  id: this.MembershipInformationData.customerId
                }).then((res) => {
                  console.log(res)
                  this.$axios.getqueryCustomera({
                    phone: res.data.customerPhone
                  }).then((res) => {
                    console.log(res)
                    this.MembershipInformationData.bankCard = res.data.bankCard
                  })
                })
              }
            });
        } else {
          this.$message({
            message: '请填写完整信息',
            type: 'warning'
          });
        }

      },
      // 时间显示
      show(val) {
        var val1 = val.split(".");
        var val2 = val1[0].split("T").join(" ");
        return val2;
      },
      //删除银行卡
      Deletephone(row) {
        this.Deletep = true;
        this.bankCardId = row.bankCardId;

        console.log(this.bankCardId);
      },
      // 删除银行卡
      getbackDeleteBankCard() {
        this.Deletep = false;
        this.$axios
          .getbackDeleteBankCard({
            bankCardId: String(this.bankCardId),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.$axios.getcustomerPhone({
                id: this.MembershipInformationData.customerId
              }).then((res) => {
                console.log(res)
                this.$axios.getqueryCustomera({
                  phone: res.data.customerPhone
                }).then((res) => {
                  console.log(res)
                  this.MembershipInformationData.bankCard = res.data.bankCard
                })
              })
            }
          });
      },
      onSubmit() {
        console.log("submit!");
      },
      BankcardhandleClose() {
        this.Bankcard = false;
      },
      DeletephandleClose() {
        this.Deletep = false;
      },
      ModifyhandleClose() {
        this.Modify = false;
      },
    },
    mounted() {
      // this.getbackSelectCard();
      console.log(this.MembershipInformationData);
    },
  };
</script>
<style scoped>
  .Newbankcard {
    height: 100vh;
    background-color: #f7f7f7;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
    line-height: 57px;
  }

  .bandCard {
    margin: 20px 0 0px 20px;
  }

  .tuo-1 {
    display: flex;
    align-items: center;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-right: 4px;
    font-size: 12px;
  }

  .too-1-1 {
    display: flex;
    font-size: 20px;
    align-items: center;
  }

  .too {
    width: 3.5px;
    height: 22px;
    background-color: #4b71bf;
    margin-right: 4px;
  }

  /* 下划线 */
  .hackhome {
    border-top: 1px solid #e0e0e0;
    width: 98%;
    margin-left: 20px;
    margin-bottom: 30px;
  }

  .botton {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    min-width: 880px;
  }

  .table {
    margin-left: 20px;
    margin-right: 20px;
  }

  .add {
    width: 500px;
    height: 350px;
    background-color: #fff;
    margin-left: 500px;
    border: 1px solid #c4c4c4;
  }

  #selectForm>>>.el-form-item__label {
    font-size: 11px;
  }
</style>